<template>
    <div>
        <header>
            <h1>可视化DEMO</h1>
        </header>
        <section class="container">
            <section class="itemLeft">
                <ItemPage>
                    <ItemOne></ItemOne>
                </ItemPage>
                <ItemPage>
                    <ItemTwo></ItemTwo>
                </ItemPage>
            </section>
            <section class="itemCenter"></section>
            <section class="itemRight">
                <ItemPage>
                    <ItemThree></ItemThree>
                </ItemPage>
                <ItemPage>
                    <ItemFour></ItemFour>
                </ItemPage>
            </section>
        </section>
    </div>
</template>

<script>
    import ItemPage from '@/components/itemPage.vue'
    import ItemOne from '@/components/itemOne.vue'
    import ItemTwo from '@/components/itemTwo.vue'
    import ItemThree from '@/components/itemThree.vue'
    import ItemFour from '@/components/itemFour.vue'
    import { inject } from 'vue'
    export default {
        name:'homePage',
        components:{
            ItemPage,
            ItemOne,
            ItemTwo,
            ItemThree,
            ItemFour,
        },
        setup(){
            let $echarts=inject("echarts")
            let $http=inject("axios")
            console.log($echarts)
            console.log($http)
        }
    }
</script>

<style lang="css" scoped>
header {

    height: 50px;
    width: 100%;
    color:bisque;
    text-align: center;
}
.container {
    margin: 0 auto;
    border: 1px solid red;
    height: 800px;
    display: flex;
}
.itemLeft, .itemRight {
    flex: 3;
}
.itemCenter {
    flex: 5;
    height: 800px;
    border: 1px solid orchid;
}
</style>